
const echarts = require('echarts')
export default {
  data(){
    return {
      echart1: undefined,
      echart2: undefined,
      echart3: undefined,
      echart4: undefined,
      echart5: undefined,
      echart6: undefined,
      echart7: undefined,
      echart8: undefined,
      echart9: undefined,
      startCharts1: undefined,
      startCharts2: undefined,
      startCharts3: undefined,
      startCharts4: undefined,
      startCharts5: undefined,
      startCharts6: undefined,
      startCharts7: undefined,
      startCharts8: undefined,
      startCharts9: undefined,
    }
  },
  methods:{
    initChart1(date, qualifiedList, ratios, yMax) {
      var yMax1 = 0;
      var yMax2 = 0;
      for (var i = 0; i < qualifiedList.length; i++) {
        if (Number(qualifiedList[i]) > yMax1) {
          yMax1 = qualifiedList[i]
        }
    }
      for (var i = 0; i < ratios.length; i++) {
          if (Number(ratios[i]) > yMax2) {
            yMax2 = ratios[i]
          }
      }
      let options = {
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            height:10,
            bottom:0,
            filterMode: 'filter'
          }
        ],
        barWidth: 7,
        title: {
          left: 10,
          top: 5,
          text: '来料批合格率',
          textStyle: {
            fontSize: 18,
            color:'white'
          }
        },
        legend: {
          x: '40%',
          y: 40,
          itemWidth:20,
          itemHeight:8,
          textStyle: {
            color:'#ffffff',
          }
        },
        backgroundColor: 'transparent',
        grid:{
          left: 80,
          right: 70,
          top: 80,

        },
        xAxis: [{
          type: 'category',
          data: date,
          axisTick: {
            show: false   //刻度线
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color:'white'
            },
          },
          splitLine: {//分割线配置
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#143fee'
            }
          }

        }],
        tooltip: {
          show: true,
          trigger: "axis"
        },
        yAxis: [{
          type: 'value',
          name: '合格率',
          nameTextStyle: {
            padding: [0, 0, 0, -60], // 上右下左与原位置距离
            color: 'rgba(255,255,255,0.5)',
          },
          min: 0,
          max: yMax2,
          // interval: 1,
          splitNumber: yMax == 1?1:5, //设置坐标轴的分割段数
          axisTick: {
            show: false   //刻度线
          },
          axisLine: {
            show: false,   //刻度线
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color:'rgba(107,184,255,0.65)'
            },
          },
          splitLine: {
            lineStyle: {
              width: 0.5,
              color:  'rgba(255,255,255,0.15)',
            }
          }
        },
          {
            type: 'value',
            name: '批数',
            nameTextStyle: {
              padding: [0, 0, 0, 50],// 上右下左与原位置距离
              color: 'rgba(255,255,255,0.5)',
            },
            min: 0,
            max: yMax1,
            splitNumber: yMax == 1?1:4, //设置坐标轴的分割段数
            axisTick: {
              show: true   //刻度线
            },
            axisLine: {
              show: true,   //刻度线
            },
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color:'rgba(107,184,255,0.65)'
              },

            },
            splitLine: {
              lineStyle: {
                width: 0.5,
                color: 'rgba(255,255,255,0.15)'
              }
            }
          }
          ],
        series: [{
          name: "批数",
          data: qualifiedList,
          yAxisIndex: 1,
          type: 'bar',
          color: 'rgba(157, 179, 255, 0.85)',
          barGap: '-100%',
          itemStyle: {
            barBorderRadius: 0,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: 'rgba(111,141,255,0.85)'},
              {offset: 0.4, color: 'rgba(157,179,255,0.85)'},
              {offset: 1, color:  '#314896'}
            ]),
          },
        
          // label: {
          //   color: '#ffffff',
          //   show: true,//是否显示
          //   position: 'top',//显示位置
          // },
          z: '-1',
        },

          {
          name: "合格率",
          data: ratios,
          type: 'line',
          color: '#0B7BE3',
         
          symbolSize: 5,
          itemStyle: {
            color: this.theme == 'white' ?'#0B7BE3':new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: 'rgba(149, 204, 255, 1)'},
              {offset: 1, color: 'rgba(11, 123, 227, 1)'}
            ]),
          },
        }]
      }
      this.echart1 = echarts.init(this.$refs.echart1)
      this.echart1.setOption(options)
      // this.echartImg = this.myChart.getDataURL()
      window.addEventListener("resize", () => this.echart1.resize());
      this.echart1.on('click', (params) => {
        console.log(params)
        this.dataMet = {
          "dateType": this.queryParams1.dateType,
          "endTime": this.queryParams1.endTime,
          "factoryCode": this.queryParams.plantCode,
          "startTime": this.queryParams1.startTime,
        }
        this.visible = true
      })
      // var e = 0,self=this;
      // var r = function() {
      //   var t = options.series[0].data.length;
      //   self.echart1.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //     dataIndex: e
      //   }),
      //     e = (e + 1) % t,
      //     self.echart1.dispatchAction({
      //       type: "highlight",
      //       seriesIndex: 0,
      //       dataIndex: e
      //     }),
      //     self.echart1.dispatchAction({
      //       type: "showTip",
      //       seriesIndex: 0,
      //       dataIndex: e
      //     })
      // };
      // self.startCharts1 && clearInterval(self.startCharts1)
      // self.startCharts1 = setInterval(r, 2e3)
      // self.echart1.on("mouseout", function(e) {
      //   self.startCharts1 && clearInterval(self.startCharts1),
      //     self.startCharts1 = setInterval(r, 2e3)
      // })
    },
    initChart2(data) {
      //materialVos {materialName materialRate materialKind (1:主材 2：辅材)}  auxiliary  main
      const { materialVos, auxiliary,  main } = data
      var yMax = 0;
      for (var i = 0; i < materialVos.length; i++) {
          if (Number(materialVos[i].materialRate) > yMax) {
            yMax = materialVos[i].materialRate
            console.log(yMax,"...........................")
          }
      }
      
      // 创建颜色映射
      const colorMapping = {
        '1': 'rgb(245, 156, 116,100)', // 主材颜色
        '2': 'rgb(242, 221, 140, 100)', // 辅材颜色
        // 其他 materialKind 值的颜色映射
      };
      let options = {
        graphic:[
          { type: 'group',
            left: 30,  // 定位到右下角
            top: 40, // 定位到右下角
            // rotation: Math.PI / 4,
            children: [
              {
                type: 'rect',
                left: 'center', // 相对父元素居中
                top: 'middle',  // 相对父元素居中
                shape: {
                  width: 80,
                  height: 40
                },
                style: {
                  fill: 'rgba(255,255,255,0.2)',
                  // stroke: '#999',
                  // lineWidth: 2,
                  // shadowBlur: 8,
                  // shadowOffsetX: 3,
                  // shadowOffsetY: 3,
                  // shadowColor: 'rgba(0,0,0,0.3)'
                }
              },
              {
                type: 'text',
                left: 'center', // 相对父元素居中
                top: 'middle',  // 相对父元素居中
                style: {
                  fill: 'white',
                  text: '主材 '+ (main||''),
                  font: '14px Microsoft YaHei'
                }
              },
            ]},
          { type: 'group',
            left: 120,  // 定位到右下角
            top: 40, // 定位到右下角
            // rotation: Math.PI / 4,
            children: [
              {
                type: 'rect',
                left: 'center', // 相对父元素居中
                top: 'middle',  // 相对父元素居中
                shape: {
                  width: 80,
                  height: 40
                },
                style: {
                  fill: 'rgba(255,255,255,0.2)',
                  // stroke: '#999',
                  // lineWidth: 2,
                  // shadowBlur: 8,
                  // shadowOffsetX: 3,
                  // shadowOffsetY: 3,
                  // shadowColor: 'rgba(0,0,0,0.3)'
                }
              },
              {
                type: 'text',
                left: 'center', // 相对父元素居中
                top: 'middle',  // 相对父元素居中
                style: {
                  fill: 'white',
                  text: '辅材 '+ (auxiliary||''),
                  font: '14px Microsoft YaHei'
                }
              },
            ]},
          { type: 'group',
            left: 220,  // 定位到右下角
            top: 68, // 定位到右下角
            // rotation: Math.PI / 4,
            children: [
              {
                type: 'rect',
                left: 0, // 相对父元素居中
                top: 'middle',  // 相对父元素居中
                shape: {
                  width: 10,
                  height: 10
                },
                style: {
                  fill: '#F59C74',
                  // stroke: '#999',
                  // lineWidth: 2,
                  // shadowBlur: 8,
                  // shadowOffsetX: 3,
                  // shadowOffsetY: 3,
                  // shadowColor: 'rgba(0,0,0,0.3)'
                }
              },
              {
                type: 'text',
                left: 20, // 相对父元素居中
                top: 'middle',  // 相对父元素居中
                style: {
                  fill: 'white',
                  text: '主材',
                  font: '14px Microsoft YaHei'
                }
              },
              {
                type: 'rect',
                left: 70, // 相对父元素居中
                top: 'middle',  // 相对父元素居中
                shape: {
                  width: 10,
                  height: 10
                },
                style: {
                  fill: '#F2DD8C',
                  // stroke: '#999',
                  // lineWidth: 2,
                  // shadowBlur: 8,
                  // shadowOffsetX: 3,
                  // shadowOffsetY: 3,
                  // shadowColor: 'rgba(0,0,0,0.3)'
                }
              },
              {
                type: 'text',
                left: 90, // 相对父元素居中
                top: 'middle',  // 相对父元素居中
                style: {
                  fill: 'white',
                  text: '辅材',
                  font: '14px Microsoft YaHei'
                }
              },
            ]}
        ],
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            height:10,
            xAxisIndex: [0],
            filterMode: 'filter',
          }
        ],
        barWidth: 7,
        title: {
          left: 10,
          top: 5,
          text: this.$t('cockpit.materialBatchQualificationRate'),
          textStyle: {
            fontSize: 16,
            color:'white'
          }
        },
        // legend: {
        //   x: '60%',
        //   y: 15,
        //   itemWidth:20,
        //   itemHeight:8,
        //   textStyle: {
        //     color:'#ffffff',
        //   }
        // },
        backgroundColor: 'transparent',
        grid:{
          left: 80,
          right: 70,
          top: 120,
          // bottom: 40,
        },
        xAxis: {
          type: 'category',
          data: materialVos?.map(i=>i.materialName),
          axisTick: {
            show: false   //刻度线
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color:'rgba(107,184,255,0.65)'

            }
          },
          splitLine: {//分割线配置
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#143fee'
            }
          }

        },
        tooltip: {
          show: true,
          trigger: "axis"
          // formatter: function (params) {
          //   let str = `<div class="line-head">${params[0].axisValue}</div>`;
          //   if(params && params.length>0 && params[0] && params[1] && params[2] && params[0].seriesName && params[1].seriesName && params[2].seriesName) {
          //     let dom1 = `<div class="line-tag"><span class="icon"><i class="icon1"></i></span><span>${params[0].seriesName}：</span><span>${params[0].value}</span></div>`
          //     let dom2 = `<div class="line-tag"><span class="icon"><i class="icon2"></i></span><span>${params[1].seriesName}：</span><span>${params[1].value}</span></div>`
          //     let dom3 = `<div class="line-tag"><span class="icon"><i class="icon3"></i></span><span>${params[2].seriesName}：</span><span>${params[2].value}%</span></div>`
          //     str += dom1 + dom2 + dom3
          //   }
          //   return str
          // }
        },
        yAxis: [{
          type: 'value',
          name: '合格率',
          nameTextStyle: {
            padding: [0, 0, 0, -60], // 上右下左与原位置距离
            color: 'rgba(255,255,255,0.5)',
          },
          min: 0,
          max: yMax,
          // interval: 1,
          splitNumber: 5, //设置坐标轴的分割段数
          axisTick: {
            show: false   //刻度线
          },
          axisLine: {
            show: false,   //刻度线
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color:'rgba(107,184,255,0.65)'
            }
          },
          splitLine: {
            lineStyle: {
              width: 0.5,
              color: 'rgba(255,255,255,0.15)'
            }
          }
        }
          ],
        series: [{
          name: "合格率",
          data: materialVos?.map(i=>i.materialRate),
          type: 'bar',
          color: 'rgba(157, 179, 255, 0.85)',
          barGap: '-100%',
          itemStyle: {
            barBorderRadius: 0,
            color: (params) => {
              const materialKind = materialVos[params.dataIndex]?.materialKind;
              return colorMapping[materialKind] || 'rgba(157, 179, 255, 0.85)';
            }
          },
          // label: {
          //   color: '#ffffff',
          //   show: true,//是否显示
          //   position: 'top',//显示位置
          // },
          z: '-1',
        }]
      }
      this.echart2 = echarts.init(this.$refs.echart2)
      this.echart2.setOption(options)
      // this.echartImg = this.myChart.getDataURL()
      window.addEventListener("resize", () => this.echart2.resize());
      this.echart2.on('click', (params) => {
        console.log(params)
        this.dataMea = {
          "time": this.queryParams2.time,
          "factoryCode": this.queryParams.plantCode,
          materialType: params.materialCode
        }
        this.visibleMea = true
      })
      // var e = 0,self=this;
      // var r = function() {
      //   var t = options.series[0].data.length;
      //   self.echart2.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //     dataIndex: e
      //   }),
      //     e = (e + 1) % t,
      //     self.echart2.dispatchAction({
      //       type: "highlight",
      //       seriesIndex: 0,
      //       dataIndex: e
      //     }),
      //     self.echart2.dispatchAction({
      //       type: "showTip",
      //       seriesIndex: 0,
      //       dataIndex: e
      //     })
      // };
      // self.startCharts2 && clearInterval(self.startCharts2)
      // self.startCharts2 = setInterval(r, 2e3)
      // self.echart2.on("mouseout", function(e) {
      //   self.startCharts2 && clearInterval(self.startCharts2),
      //     self.startCharts2 = setInterval(r, 2e3)
      // })
    },


    initChart3(data){
      let keys = data.map(i=>i.statusName)
      let nameColor = {
        'NC严重不符合项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#FF1600' },
          { offset: 1, color: '#FFA792' },
        ]),
        'NC一般不符合项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#B24E45' },
          { offset: 1, color: 'rgba(247,143,126,0.85)' },
        ]),
        'OFI建议项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(26,178,243,0.85)' },
          { offset: 1, color: 'rgba(11,123,227,0.85)' },
        ]),
        '观察项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(67,216,205,0.85)' },
          { offset: 1, color: 'rgba(32,176,159,0.85)' },
        ])}
      let options = {
        backgroundColor: 'transparent',
        // color: this.colors,//配置颜色
        tooltip: {
          trigger: 'item',
          textStyle:{
            fontSize: 12
          }
          // position: ['50%','50%'],
          // formatter: "{b}<br/>问题总数: {c}<br/>问题总数百分比:{d}%"
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        grid: {
          show: false,
          top: 0,
          bottom: 0
        },
        title: {
          left: 10,
          top: 5,
          text: this.$t('cockpit.inspectionStatus'),
          textStyle: {
            fontSize: 16,
            color:'white'
          }
        },
        // legend: {
        //   icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        //   itemWidth: 10,  // 设置宽度
        //   itemHeight: 10, // 设置高度
        //   itemGap: 10, // 设置间距
        //   orient: "vertical",
        //   left: 20,
        //   top:'center',
        //   data: keys,
        //   textStyle: {
        //     color:  '#ffffff'
        //   }
        // },
        series: [
          {
            name: this.$t('cockpit.visitSource'),
            type: 'pie',
            radius: ['35%', '60%'],
            center :['50%', '59%'],
            avoidLabelOverlap: true,
            labelLine: {
              minTurnAngle: 0,
            },
            emphasis: {
              label: {
                show: true,
              }
            },
            itemStyle:{
              borderWidth: 1,
              borderColor: 'white'
            },
            label: {
              // show: false,
              textStyle:{
                color: 'white',
              },
              formatter: '{b}\n{c}%'//设置左边图上的%
            },
            data: data.map(i=> {
              return {
                name: i.statusName,
                value:i.statusRate,
                itemStyle:{
                  color:  nameColor[i.statusRate],
                },
              }
            })
          }
        ]
      }
      this.echart3 = echarts.init(this.$refs.echart3)
      this.echart3.setOption(options)
      window.addEventListener("resize", () => this.echart3.resize());
      this.echart3.on('click', (params) => {
        const { startTime, endTime} = this.queryParams3
        const { plantCode} = this.queryParams
        console.log('params',params)
        this.dataStu = {
          "key":params.name,
          "dateType": "2",
          "endTime": endTime,
          "factoryCode": plantCode||undefined,
          "startTime": startTime}
        this.visibleStu = true
      })
      // var e = 0,self=this;
      // var r = function() {
      //   var t = options.series[0].data.length;
      //   self.echart3.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //     dataIndex: e
      //   }),
      //     e = (e + 1) % t,
      //     self.echart3.dispatchAction({
      //       type: "highlight",
      //       seriesIndex: 0,
      //       dataIndex: e
      //     }),
      //     self.echart3.dispatchAction({
      //       type: "showTip",
      //       seriesIndex: 0,
      //       dataIndex: e
      //     })
      // };
      // self.startCharts3 && clearInterval(self.startCharts3)
      // self.startCharts3 = setInterval(r, 2e3)
      // self.echart3.on("mouseout", function(e) {
      //   self.startCharts3 && clearInterval(self.startCharts3),
      //     self.startCharts3 = setInterval(r, 2e3)
      // })
    },
    initChart4(data){
      let keys = data.map(i=>i.statusName)
      let nameColor = {
        'NC严重不符合项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#FF1600' },
          { offset: 1, color: '#FFA792' },
        ]),
        'NC一般不符合项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#B24E45' },
          { offset: 1, color: 'rgba(247,143,126,0.85)' },
        ]),
        'OFI建议项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(26,178,243,0.85)' },
          { offset: 1, color: 'rgba(11,123,227,0.85)' },
        ]),
        '观察项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(67,216,205,0.85)' },
          { offset: 1, color: 'rgba(32,176,159,0.85)' },
        ])}
      let options = {
        backgroundColor: 'transparent',
        // color: this.colors,//配置颜色
        tooltip: {
          trigger: 'item',
          textStyle:{
            fontSize: 12
          }
          // position: ['50%','50%'],
          // formatter: "{b}<br/>问题总数: {c}<br/>问题总数百分比:{d}%"
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        grid: {
          show: false,
          top: 0,
          bottom: 0
        },
        title: {
          left: 10,
          top: 5,
          text: this.$t('cockpit.disposalStatusOfDefectiveProducts'),
          textStyle: {
            fontSize: 16,
            color:'white'
          }
        },
        // legend: {
        //   icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        //   itemWidth: 10,  // 设置宽度
        //   itemHeight: 10, // 设置高度
        //   itemGap: 10, // 设置间距
        //   orient: "vertical",
        //   left: 20,
        //   top:'center',
        //   data: keys,
        //   textStyle: {
        //     color:  '#ffffff'
        //   }
        // },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['35%', '60%'],
            center :['50%', '59%'],
            avoidLabelOverlap: true,
            labelLine: {
              minTurnAngle: 0,
            },
            emphasis: {
              label: {
                show: true,
              }
            },
            itemStyle:{
              borderWidth: 1,
              borderColor: 'white'
            },
            label: {
              // show: false,
              textStyle:{
                color: 'white',
              },
              formatter: '{b}\n{c}%'//设置左边图上的%
            },
            data: data.map(i=> {
              return {
                name: i.statusName,
                value:i.statusRate,
                itemStyle:{
                  color:  nameColor[i.statusRate],
                },
              }
            })
          }
        ]
      }
      this.echart4 = echarts.init(this.$refs.echart4)
      this.echart4.setOption(options)
      window.addEventListener("resize", () => this.echart4.resize());
      this.echart4.on('click', (params) => {
        console.log(params)
        // this.$emit('showTable', params.name, this.type)
        this.dataMrb = {
          ncrStatus: this.ncrStateMap[params.name],
          "startTime": startTime,
          "endTime": endTime,
          "factoryCode": plantCode?.join(',')||undefined,
        }
        this.visibleMrb = true
      })
      // var e = 0,self=this;
      // var r = function() {
      //   var t = options.series[0].data.length;
      //   self.echart3.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //     dataIndex: e
      //   }),
      //     e = (e + 1) % t,
      //     self.echart3.dispatchAction({
      //       type: "highlight",
      //       seriesIndex: 0,
      //       dataIndex: e
      //     }),
      //     self.echart3.dispatchAction({
      //       type: "showTip",
      //       seriesIndex: 0,
      //       dataIndex: e
      //     })
      // };
      // self.startCharts3 && clearInterval(self.startCharts3)
      // self.startCharts3 = setInterval(r, 2e3)
      // self.echart3.on("mouseout", function(e) {
      //   self.startCharts3 && clearInterval(self.startCharts3),
      //     self.startCharts3 = setInterval(r, 2e3)
      // })
    },
    initChart5(data) {
      const supplierName = data.map(i=>i.supplierName)
      const  supplierRate = data.map(i=>i.supplierRate)
      let options = {
        barWidth: 7,
        title: {
          left: 10,
          top: 5,
          text: '供应商批合格率',
          textStyle: {
            fontSize: 18,
            color:'white'
          }
        },
        legend: {
          x: '40%',
          y: 40,
          itemWidth:20,
          itemHeight:8,
          textStyle: {
            color:'#ffffff',
          }
        },
        backgroundColor: 'transparent',
        grid:{
          left: 80,
          right: 70,
          top: 80,
          bottom: 40,
        },
        xAxis: {
          type: 'category',
          data: supplierName,
          axisTick: {
            show: false   //刻度线
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color:'white'
            },
            // lineStyle: {
            //   color:'rgba(255,255,255,0.15)'
            // },
          },
          splitLine: {//分割线配置
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#143fee'
            }
          }

        },
        tooltip: {
          show: true,
          trigger: "axis",
          // formatter: function (params) {
          //   console.log(1111, params)
          //   let str = `<div class="line-head">${params[0].axisValue}</div>`;
          //   if(params && params.length>0 && params[0] && params[1] && params[2] && params[0].seriesName && params[1].seriesName && params[2].seriesName ) {
          //     let dom1 = `<div class="line-tag"><span class="icon"><i class="icon1"></i></span><span>${params[0].seriesName}：</span><span>${params[0].value}</span></div>`
          //     let dom2 = `<div class="line-tag"><span class="icon"><i class="icon2"></i></span><span>${params[1].seriesName}：</span><span>${params[1].value}</span></div>`
          //     let dom3 = `<div class="line-tag"><span class="icon"><i class="icon3"></i></span><span>${params[2].seriesName}：</span><span>${params[2].value}%</span></div>`
          //     str += dom1 + dom2 + dom3
          //   }
          //   return str
          // }
        },
        yAxis: [{
          type: 'value',
          name: '合格率',
          nameTextStyle: {
            padding: [0, 0, 0, -60], // 上右下左与原位置距离
            color: 'rgba(255,255,255,0.5)',
          },
          min: 0,
          // max: yMax,
          // interval: 1,
          // splitNumber: yMax == 1?1:4, //设置坐标轴的分割段数
          axisTick: {
            show: false   //刻度线
          },
          axisLine: {
            show: false,   //刻度线
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color:'rgba(107,184,255,0.65)'
            },
          },
          splitLine: {
            lineStyle: {
              width: 0.5,
              color:  'rgba(255,255,255,0.15)',
            }
          }
        },
          {
            type: 'value',
            name: '合格率',
            nameTextStyle: {
              padding: [0, 0, 0, 50],// 上右下左与原位置距离
              color: 'rgba(255,255,255,0.5)',
            },
            min: 0,
            // max: yMax,
            // splitNumber: yMax == 1?1:4, //设置坐标轴的分割段数
            axisTick: {
              show: false   //刻度线
            },
            axisLine: {
              show: false,   //刻度线
            },
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color:'rgba(107,184,255,0.65)'
              },

            },
            splitLine: {
              lineStyle: {
                width: 0.5,
                color: 'rgba(255,255,255,0.15)'
              }
            }
          }
        ],
        series: [
          {
            name: "合格率",
            data: supplierRate,
            type: 'line',
            color: '#0B7BE3',
            symbolSize: 5,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(58,77,233,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(58,77,233,0.3)'
                }
              ])
            },
            itemStyle: {
              color: this.theme == 'white' ?'#0B7BE3':new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgba(149, 204, 255, 1)'},
                {offset: 1, color: 'rgba(11, 123, 227, 1)'}
              ]),
            },
          }]
      }
      this.echart5 = echarts.init(this.$refs.echart5)
      this.echart5.setOption(options)
      // this.echartImg = this.myChart.getDataURL()
      window.addEventListener("resize", () => this.echart5.resize());
      this.echart5.on('click', (params) => {
        console.log(params)
        this.visibleEchart56 = false
        this.handleQueryEchart6()
      })
    },

    initChart6(date, qualifiedList, ratios, yMax) {
      let options = {
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            height:10,
            xAxisIndex: [0],
            filterMode: 'filter'
          }
        ],
        barWidth: 7,
        title: {
          left: 10,
          top: 5,
          text: '来料批合格率',
          textStyle: {
            fontSize: 18,
            color:'white'
          }
        },
        legend: {
          x: '40%',
          y: 40,
          itemWidth:20,
          itemHeight:8,
          textStyle: {
            color:'#ffffff',
          }
        },
        backgroundColor: 'transparent',
        grid:{
          left: 80,
          right: 70,
          top: 80,

        },
        xAxis: {
          type: 'category',
          data: date,
          axisTick: {
            show: false   //刻度线
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color:'white'
            },
            // lineStyle: {
            //   color:'rgba(255,255,255,0.15)'
            // },
          },
          splitLine: {//分割线配置
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#143fee'
            }
          }

        },
        // tooltip: {
        //   show: true,
        //   trigger: "axis",
        //   formatter: function (params) {
        //     console.log(1111, params)
        //     let str = `<div class="line-head">${params[0].axisValue}</div>`;
        //     if(params && params.length>0 && params[0] && params[1] && params[2] && params[0].seriesName && params[1].seriesName && params[2].seriesName ) {
        //       let dom1 = `<div class="line-tag"><span class="icon"><i class="icon1"></i></span><span>${params[0].seriesName}：</span><span>${params[0].value}</span></div>`
        //       let dom2 = `<div class="line-tag"><span class="icon"><i class="icon2"></i></span><span>${params[1].seriesName}：</span><span>${params[1].value}</span></div>`
        //       let dom3 = `<div class="line-tag"><span class="icon"><i class="icon3"></i></span><span>${params[2].seriesName}：</span><span>${params[2].value}%</span></div>`
        //       str += dom1 + dom2 + dom3
        //     }
        //     return str
        //   }
        // },
        yAxis: [{
          type: 'value',
          name: '批数',
          nameTextStyle: {
            padding: [0, 0, 0, -60], // 上右下左与原位置距离
            color: 'rgba(255,255,255,0.5)',
          },
          min: 0,
          max: yMax,
          // interval: 1,
          splitNumber: yMax == 1?1:4, //设置坐标轴的分割段数
          axisTick: {
            show: false   //刻度线
          },
          axisLine: {
            show: false,   //刻度线
          },
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color:'rgba(107,184,255,0.65)'
            },
          },
          splitLine: {
            lineStyle: {
              width: 0.5,
              color:  'rgba(255,255,255,0.15)',
            }
          }
        }
        ],
        series: [{
          name: "批数",
          data: qualifiedList,
          type: 'bar',
          color: 'rgba(157, 179, 255, 0.85)',
          barGap: '-100%',
          itemStyle: {
            barBorderRadius: 0,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: 'rgba(111,141,255,0.85)'},
              {offset: 0.4, color: 'rgba(157,179,255,0.85)'},
              {offset: 1, color:  '#314896'}
            ]),
          },
          // label: {
          //   color: '#ffffff',
          //   show: true,//是否显示
          //   position: 'top',//显示位置
          // },
          z: '-1',
        }
        ]
      }
      this.echart6 = echarts.init(this.$refs.echart6)
      this.echart6.setOption(options)
      // this.echartImg = this.myChart.getDataURL()
      window.addEventListener("resize", () => this.echart6.resize());
      this.echart6.on('click', (params) => {
        console.log(params)
        this.dataSup = {
          "time": "",
          "factoryCode": this.queryParams.plantCode,
          "materialType": "",
          // supplierCode: data[params.dataIndex].supplierCode
        }
        this.visibleSup = true
      })
    },

    initChart8(data){
      let keys = data.map(i=>i.name)
      let nameColor = {
        'NC严重不符合项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#FF1600' },
          { offset: 1, color: '#FFA792' },
        ]),
        'NC一般不符合项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#B24E45' },
          { offset: 1, color: 'rgba(247,143,126,0.85)' },
        ]),
        'OFI建议项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(26,178,243,0.85)' },
          { offset: 1, color: 'rgba(11,123,227,0.85)' },
        ]),
        '观察项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(67,216,205,0.85)' },
          { offset: 1, color: 'rgba(32,176,159,0.85)' },
        ])}
      let options = {
        backgroundColor: 'transparent',
        // color: this.colors,//配置颜色
        tooltip: {
          trigger: 'item',
          textStyle:{

            fontSize: 12
          }
          // position: ['50%','50%'],
          // formatter: "{b}<br/>问题总数: {c}<br/>问题总数百分比:{d}%"
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        grid: {
          show: false,
          top: 0,
          bottom: 0
        },
        title: {
          left: 10,
          top: 10,
          text: '不符合类型',
          textStyle: {
            fontSize: 14,
            color:'#6BB8FF'
          }
        },
        // legend: {
        //   icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        //   itemWidth: 10,  // 设置宽度
        //   itemHeight: 10, // 设置高度
        //   itemGap: 10, // 设置间距
        //   orient: "vertical",
        //   left: 20,
        //   top:'center',
        //   data: keys,
        //   textStyle: {
        //     color:  '#ffffff'
        //   }
        // },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['35%', '60%'],
            center :['50%', '55%'],
            avoidLabelOverlap: true,
            labelLine: {
              minTurnAngle: 0,
            },
            emphasis: {
              label: {
                show: true,
              }
            },
            label: {
              show: false,
              textStyle:{
                color: '#6BB8FF',
              },
              formatter: '{b}\n{c}'//设置左边图上的%
            },
            data: data.map(i=> {
              return {
                name: i.name,
                value:i.value,
                itemStyle:{
                  color:  nameColor[i.name],
                },
              }
            })
          }
        ]
      }
      this.echart8 = echarts.init(this.$refs.echart8)
      this.echart8.setOption(options)
      window.addEventListener("resize", () => this.echart8.resize());
      this.echart8.on('click', (params) => {
        this.$emit('showTable', params.name, this.type)
      })
      var e = 0,self=this;
      var r = function() {
        var t = options.series[0].data.length;
        self.echart8.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: e
        }),
          e = (e + 1) % t,
          self.echart8.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e
          }),
          self.echart8.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e
          })
      };
      self.startCharts8 && clearInterval(self.startCharts8)
      self.startCharts8 = setInterval(r, 2e3)
      self.echart8.on("mouseout", function(e) {
        self.startCharts8 && clearInterval(self.startCharts8),
          self.startCharts8 = setInterval(r, 2e3)
      })
    },
    initChart9(data){
      let keys = data.map(i=>i.name)
      let nameColor = {
        '待整改': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#96A9C4' },
          { offset: 1, color: '#5D7092' },
        ]),
        '进行中': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(227,165,11,0.85)' },
          { offset: 1, color: 'rgba(243,209,26,0.85) ' },
        ]),
        '已完成': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(67,216,205,0.85)' },
          { offset: 1, color: 'rgba(32,176,159,0.85)' },
        ])}
      let options = {
        backgroundColor: 'transparent',
        // color: this.colors,//配置颜色
        tooltip: {
          trigger: 'item',
          textStyle:{
            fontSize: 12
          }
          // position: ['50%','50%'],
          // formatter: "{b}<br/>问题总数: {c}<br/>问题总数百分比:{d}%"
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        grid: {
          // show: false,
          top: 0,
          bottom: 0
        },
        title: {
          left: 10,
          top: 10,
          text: '任务状态',
          textStyle: {
            fontSize: 14,
            color:'#6BB8FF'
          }
        },

        // legend: {
        //   icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        //   itemWidth: 10,  // 设置宽度
        //   itemHeight: 10, // 设置高度
        //   itemGap: 10, // 设置间距
        //   orient: "vertical",
        //   left: 20,
        //   top:'center',
        //   data: keys,
        //   textStyle: {
        //     color:  '#ffffff'
        //   }
        // },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['35%', '60%'],
            center :['50%', '55%'],
            emphasis: {
              label: {
                show: true,
              }
            },
            label: {
              show: false,
              textStyle:{
                color: '#6BB8FF',
              },
              formatter: '{b}\n{c}'//设置左边图上的%
            },
            data: data.map(i=> {
              return {
                name: i.name,
                value:i.value,
                itemStyle:{
                  color:  nameColor[i.name],
                },
              }
            })
          }
        ]
      }
      this.echart9 = echarts.init(this.$refs.echart9)
      this.echart9.setOption(options)
      window.addEventListener("resize", () => this.echart9.resize());
      this.echart9.on('click', (params) => {
        this.$emit('showTable', params.name, this.type)
      })
      var e = 0,self=this;
      var r = function() {
        var t = options.series[0].data.length;
        self.echart9.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: e
        }),
          e = (e + 1) % t,
          self.echart9.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e
          }),
          self.echart9.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e
          })
      };
      self.startCharts9 && clearInterval(self.startCharts9)
      self.startCharts9 = setInterval(r, 2e3)
      self.echart9.on("mouseout", function(e) {
        self.startCharts9 && clearInterval(self.startCharts9),
          self.startCharts9 = setInterval(r, 2e3)
      })
    },
  }
}
